<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="/index"
    text-color="#fff"
    router
    @open="handleOpen"
    @close="handleClose"
  >
    <template v-for="item of state.menu" :key="item.path">
      <el-menu-item :index="item.path" v-if="!item.children">
        <el-icon>
          <template #default><location></location></template>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>

      <el-sub-menu :index="item.path" v-else>
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item :index="item2.path" v-for="item2 of item.children" :key="item2.path">
          <el-icon><document /></el-icon>
          {{ item2.name }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
// import {
//   Document, Menu as IconMenu, Location, Setting,
// } from '@element-plus/icons-vue';

import { reactive } from 'vue';

const store = useStore();

const state = reactive({
  menu: store.state.menu,
});

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped></style>
